---
permalink: "/ui/ui-elements/section-list/non-sticky/index.xml"
tags: "UI/UI Elements/Section List"
hv_title: "Non-sticky Titles"
hv_button_behavior: "back"
---
{% extends 'templates/base.xml.njk' %}

{% block container %}
  <section-list sticky-section-titles="false">
    <section-title style="list-header">
      <text style="list-header-text">Section 1</text>
    </section-title>
    {% for item in range(1, 6) %}
      <item key="{{ item }}" style="item">
        <text style="item-label">List {{ item }}</text>
      </item>
    {% endfor %}

    <section-title style="list-header">
      <text style="list-header-text">Section 2</text>
    </section-title>
    {% for item in range(6, 11) %}
      <item key="{{ item }}" style="item">
        <text style="item-label">List {{ item }}</text>
      </item>
    {% endfor %}

    <section-title style="list-header">
      <text style="list-header-text">Section 3</text>
    </section-title>
    {% for item in range(11, 16) %}
      <item key="{{ item }}" style="item">
        <text style="item-label">List {{ item }}</text>
      </item>
    {% endfor %}

    <section-title style="list-header">
      <text style="list-header-text">Section 4</text>
    </section-title>
    {% for item in range(16, 21) %}
      <item key="{{ item }}" style="item{% if loop.last %} item-last{% endif %}">
        <text style="item-label">List {{ item }}</text>
      </item>
    {% endfor %}
  </section-list>
{% endblock %}
